<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">tui-timer</view>
			<view class="tui-page__desc">计时器，毫秒使用css模拟替代js频繁更新操作</view>
		</view>
		<view class="tui-page__bd tui-page__spacing">
			<view class="tui-section__title" >展示毫秒，自动开始，30s自动结束</view>
			<view class="thorui-flex__center">
				<tui-timer  @end="end" :maxTime="30" isMs></tui-timer>
			</view>
			<view class="tui-section__title" >不展示毫秒、小时，自动开始，20s自动结束</view>
			<view class="thorui-flex__center">
				<tui-timer :isHours="false" @end="end" :maxTime="20" colonColor="#5677fc" color="#5677fc"></tui-timer>
			</view>
			<view class="tui-section__title" >展示毫秒，手动开始，手动结束</view>
			<view class="thorui-flex__center">
				<tui-timer ref="timer" @end="end" isMs :start="false" backgroundColor="#333" color="#fff" :size="28" :width="40" :height="40" msColor="#fff" :msWidth="40"></tui-timer>
			</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="startTiming">开始</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="resetTimer">重置</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="endTimer">结束/暂停</tui-button>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			end(e){
				console.log(e)
				this.tui.toast(`计时结束，时间：${e.totalSeconds}s`)
			},
			startTiming(){
				this.$refs.timer.startTiming()
			},
			resetTimer(){
				this.$refs.timer.resetTimer()
			},
			endTimer(){
				this.$refs.timer.endTimer()
			}
		}
	}
</script>

<style>
 
</style>